<template>
  <div class="login" :style="{height: `${screenHeight}px`}">
      <img class="login-logo" src="@/assets/img/hx/logo.png">
      <div class="login-input">
        <span class="login-input-box"><img src="@/assets/img/hx/name@2x.png">
          <input v-model="userName" class="login-input-name" placeholder="请输入账号" type="text">
        </span>
        <span class="login-input-box"><img src="@/assets/img/hx/pwd_icon@2x.png">
          <input v-model="password" class="login-input-pwd" placeholder="请输入密码" :type="type"><img @click="switchType" class="login-input-eye" src="@/assets/img/hx/pwd_icon2@2x.png">
        </span>
      </div>
      <div class="login-btn"  @click="login">登录</div>
  </div>
</template>

<script>
import { login } from '@/api/request.js';
import { setStore,getStore } from '@/assets/js/utils.js';
import { Indicator } from 'mint-ui';

export default {
  name: 'login',
  data() {
    return {
      type:'password',
      userName:'',
      password:'',
    }
  },
  computed: {
      screenHeight () {
        return window.innerHeight-40;
      }
  },
  created(){
    let userId = getStore('userId');
    if(!userId){
      //跳转登录
      var fhUrl = window.location.href;
      setStore('fhUrl', fhUrl);
      this.$router.push('/wxLogin')
    }
  },
  mounted() {
    this.$store.commit('UPDATE_PAGE_TITLE', '登录')
    this.$store.commit('UPDATE_BACKSHOW', false)
    this.$store.commit('UPDATE_HEAD', true)
    this.$store.commit('UPDATE_FOOTER', false)
  },
  methods: {
      login () {
        if (!this.userName) {
          this.$Toast({
            message: '账号不能为空',
            position: 'bottom'
          })
        } else if (!this.password) {
          this.$Toast({
            message: '密码不能为空',
            position: 'bottom'
          })
        } else {
          let that = this;
          // removeStore('tokens')
          // openid ?
          Indicator.open('登录中...')
          login(that.userName, that.password).then((res) => {
            Indicator.close()
            if (res.code == 1) {
                let hxUser={
                  id:res.data.id,
                  createTime:res.data.createTime,
                  userName:res.data.userName
                }
                setStore('hxUser',hxUser)
                that.$Toast('登录成功')
                setTimeout(() => {
                  that.$router.push('/hx')
                }, 1000)
            } else {
              that.$Toast(res.msg)
            }
          }).catch(err => console.log(err))
        }
    },
    switchType(){
      switch(this.type) {
          case 'password':
              this.type='text';
              break;
          default:
              this.type='password';
      }
    }
  },
  components: {

  }
}
</script>
<style scoped lang="scss">
.login{
    box-sizing: border-box;
    margin-top:40px;
    padding: 50px 10%;
    &-logo{
      width: 60%;
      padding: 20px 0;
    }
    &-input{
        &-box{
          display: inline-block;
          position: relative;
          border-bottom: 1px solid #ddd;
          margin:12px 0px;
          width:75%;
          box-sizing: border-box;
          white-space: nowrap;
          img{
            width:20px;
          }
        }
        &-name,&-pwd{
          background:none;
          padding: 10px 10px;
          border: none;
          outline:0;
        }
        &-eye{
          position: absolute;
          right:8px;
          top:8px;
        }
    }
    &-btn{
      background-color:#FEBF00;
      margin: 20px auto;
      color:white;
      padding: 10px 20px;
      border-radius: 10px;
      width:80%;
    }
}
</style>
